/*
 * @Author: Eco.dujun 
 * @Date: 2018-09-04 09:36:06 
 * @Last Modified by: Eco.dujun
 * @Last Modified time: 2018-09-06 16:31:04
 */
<template>
    <div>
        <SearchModal v-for="(item,index) in searchName" :key="index" v-model="resultArr[index]" :searchData="item" :typeIndex="typeIndex"></SearchModal>
        <div>
            <el-button class="suBtn" style="width: 50px;height: 30px;padding: 0;" @click="search">
                搜索
            </el-button>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import SearchModal from "./SearchModal";

export default {
    /*
        searchName参数格式：
        searchName: [
            {searchPlaceholder: "单位名称", id: 1,  type: 0, url: "xxxx/xxx/xx接口链接", key: "name", data: "", time: ""},
            {searchPlaceholder: "单位状态", id: 2, type: 1, url: "", key: "status", time: "", data: [{id: 0, name: "正常"}, {id: 1, name: "异常"}]},
            {searchPlaceholder: "时间", id: 3, type: 3, url: "", key: "startTime", data: "", time: ""},
            {searchPlaceholder: "至", id: 4, type: 4, url: "", key: "endTime", data: "", time: ""}
        ],
        searchPlaceholder: 搜索名称
        id: 应该没用,可以不写
        type: 搜索框类型---- 0：普通输入框 ----- 1：通用下拉框第一种类型，此种类型下需要默认传入
            data：下拉数据源，合适无限制一般为{id: xx, name: xx}，不需要传入url，写成url: "" 就行
            ----2：通用下拉框第二种类型不需要默认传入data 写成data: ""就行，但是需传入url：通过接口请求下拉数据源
            ----3,4：一般搭配使用，时间搜索集合，url和data都不需要传入，如果时间选择默认需要显示初始值，直接传入time: "xxxx"，不需要就写成空
            其他的一样
        key: 当前使用的搜索框类型的关键字，后台接受什么名字就写什么名字

        注：searchName里得每一条对象对应一个搜索框即搜索条件
            
    */
    name: "searchPage",
    props: ["searchName", "page", "perPage", "typeIndex", "reSet"],
    components: {
        SearchModal
    },
    data() {
        return {
            titleData: this.title,
            resultArr: [] // 绑定子组件每一个输入框或者下拉框的数据
        };
    },
    watch: {
        "resultArr": {
            handler: function(val, oldVal) {
                this.$store.dispatch("handlerSearch", val);
            }
        },
        "reSet": function(val, old) {
            if (val === true) {
                this.resultArr = [];
                this.$emit("resetover");
            }
        }
    },
    methods: {
        getTableData(payload) {
            // axios.get(this.getDataUrl, { params: payload }).then((res) => {
            //     this.$emit("searchEvent", res);
            // }).catch((error) => {
            //     this.$message.error(error.message);
            // });
            this.$emit("searchEvent", payload);
        },
        search() {
            let SearchKey = this.searchName;
            let page = this.page;
            let perPage = this.perPage;
            if (page === undefined || page === "" || page === null) {
                page = 1;
            }
            if (perPage === undefined || perPage === "" || perPage === null) {
                perPage = 10;
            }
            let newArr = [];
            for (let i = 0; i < SearchKey.length; i++) {
                newArr.push(SearchKey[i].key);
            }
            let obj = {};
            for (let i = 0; i < SearchKey.length; i++) {
                obj[newArr[i]] = this.resultArr[i];
            }
            let args = {
                ...obj, ...{ page: page, per_page: perPage }
            };
            this.getTableData(args);
        }
    }
};
</script>

<style scoped>
    .el-popper {
        margin-top: 40px;
    } 
</style>
